<#import "/macro.ftl" as m>
<@m.page_header title='推广详情' />
<div id="page-content-wrapper">
    <div id="page-title">
        <h3><a href="/popularizes" class="font-blue">推广列表</a> > 推广详情</h3>
    </div>
    <div id="page-content">
		<div class="form-row">
            <div class="form-label col-md-2">
                <label for="name">名称:</label>
            </div>
            <div class="form-label col-md-10">
                <label>${popularize.name}</label>
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label>类别:</label>
            </div>
            <div class="form-label col-md-2">
                <label>${popularize.category.name} - ${popularize.category.bigger.name}</label>
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="url">推广URL:</label>
            </div>
            <div class="form-label col-md-10">
                <label>${popularize.url}</label>
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="url">广告URL:</label>
            </div>
            <div class="form-input col-md-10">
                <input placeholder="" type="text" id="name" name="name" value="${popularizeRootUrl}${popularize.adPathUrl}" data-required="true" data-rangelength="[1,45]">
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-12">
                <a href="javascript:;" class="btn medium primary-bg radius-all-4 float-right" onclick="showAddPopularizePlan();" title="Validate!">
	                <span class="button-content">添加推广方案</span>
	            </a>
            </div>
        </div>
        <table class="table">
	        <thead>
	            <tr>
	                <th>开始时间</th>
	                <th>结束时间</th>
	                <th>操作</th>
	            </tr>
	        </thead>
	        <tbody>
	        	<tr id="plan-row-template" class="hide">
	                <td id="startDate"></td>
	                <td id="endDate"></td>
	                <td>
	                    <a id="delete" href="#" class="btn medium primary-bg">
	                    	<span class="button-content">删除</span>
	                    </a>
	                </td>
	            </tr>
	        	<#list plans as plan>
					<tr id="${plan.id}">
		                <td>${plan.startDate?string("yyyy-MM-dd HH:mm:ss")}</td>
		                <td>${plan.endDate?string("yyyy-MM-dd HH:mm:ss")}</td>
		                <td>
		                    <a href="#" class="btn medium primary-bg" onclick="showDelete(${plan.id});">
		                    	<span class="button-content">删除</span>
		                    </a>
		                </td>
		            </tr>
				</#list>    
	    	</tbody>
	    </table>
    </div>
</div>
<div id="add-popularize-plan-template" class="hide">
	<form>
		<input type="hidden" name="popularize.id" value="${popularize.id}">
		<div class="form-row">
            <div class="form-label col-md-4">
                <label for="url">开始时间:</label>
            </div>
            <div class="form-input col-md-8">
                <input placeholder="" type="text" id="startDate" name="startDate" value="" data-required="true"
                	onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-4">
                <label for="url">结束时间:</label>
            </div>
            <div class="form-input col-md-8">
                <input placeholder="" type="text" id="endDate" name="endDate" value="" data-required="true"
					onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
            </div>
        </div>
	</form>
</div>
<script>

// 显示添加推广方案界面
function showAddPopularizePlan(){
	var html = '<div id="dialog" class="hide" title="添加推广方案"><div class="pad20A">' + $("#add-popularize-plan-template").html() + '</div></div>';
	$( html ).dialog({
        resizable:!0,
        minWidth:400,
        minHeight:200,
        modal:!0,
        dialogClass:"modal-dialog",
        closeOnEscape:!0,
        close : function() {
			$( this ).dialog( "destroy" );
		},
        buttons: {
            提交: function() {
            	var valid = $('#dialog form').parsley( 'validate' );
            	if(!valid){
            		return;
            	}
            	
            	$.post( '/popularizeplans', $( '#dialog form' ).serialize() )
                 .done(function(data){
                 	if(data["status"] == "success"){
                 		$.jGrowl("添加推广方案成功", {sticky:!1,position:"top-right",theme:"bg-green"});
                 		
                 		var rowTemplate = $('table #plan-row-template');
                 		var row = rowTemplate.clone();
                 		row.removeAttr('id');
                 		row.removeAttr('class');
                 		
                 		row.attr("id", data.data.id);
                 		row.find('#startDate').html(new Date(data.data.startDate).Format('yyyy-MM-dd hh:mm:ss'));
                 		row.find('#endDate').html(new Date(data.data.endDate).Format('yyyy-MM-dd hh:mm:ss'));
                 		row.find('#delete').attr('onclick', 'showDelete(' + data.data.id + ');');
                 		
                 		$('table tbody tr:eq(0)').after(row);
                 		
                 	}else{
                 		$.jGrowl(data["message"], {sticky:!1,position:"top-right",theme:"bg-red"});
                 	}
                 	$( "#dialog" ).dialog( "close" );
                 })
                 .fail(function(){
                 	$.jGrowl("添加推广方案失败", {sticky:!1,position:"top-right",theme:"bg-red"});
                 	$( "#dialog" ).dialog( "close" );
                 });
            }
		}
	});
};

// 显示删除界面
function showDelete( id ){
	$.messager.confirm( "提示", "确定删除推广方案吗？", function(){
		$.post( '/popularizeplans/delete', { "id" : id } )
	     .done(function(data){
	     	if(data["status"] == "success"){
	     		$.jGrowl("删除推广方案成功", {sticky:!1,position:"top-right",theme:"bg-green"});
	     		
	     		$('table tr[id='+ id + ']').remove();
	     	}else{
	     		$.jGrowl(data["message"], {sticky:!1,position:"top-right",theme:"bg-red"});
	     	}
	     })
	     .fail(function(){
	     	$.jGrowl("删除推广方案失败", {sticky:!1,position:"top-right",theme:"bg-red"});
	     });
	});
}

</script>